import React, {useEffect, useState} from 'react';
import {Breadcrumbs, Card, CardHeader, Grid, Link, Typography} from "@material-ui/core";
import {useDispatch, useSelector} from "react-redux";
import {setLeftDrawerMenuIndex} from "../../../../redux/reducers/commonSettings";
import {useHistory} from "react-router-dom";
import {getUserQuestionsAndIndicators, resetSession} from "../../../../redux/reducers/gqiEditor";
import ModalMessage from "../Common/Modal/ModalMessage";
import {scrollToTop} from "../../../../assets/functions/functions";
import ScrollToTop from "../Common/ScrollTopWrapper/ScrollTopWrapper";
import ContactSupportIcon from '@material-ui/icons/ContactSupport';
import BarChartIcon from '@material-ui/icons/BarChart';
import IconButton from "@material-ui/core/IconButton";
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import MyQuestions from "./MyQuestions";
import MyIndicators from "./MyIndicators";

const breadCrumb = "h6";
const borderRadius = "12px 4px 12px 4px";

export default function Dashboard() {
  // Local constants
  const history = useHistory();
  const dispatch = useDispatch();
  const [gqiEditorInProgress, setGqiEditorInProgress] = useState(false);
  // Local constants from redux store
  const userDefinedIndicators = useSelector(state => state.gqiEditor.common.userDefinedIndicators);
  const userQuestionsAndIndicators = useSelector(state => state.gqiEditor.common.userQuestionAndIndicators);
  const selectedGoal = useSelector((state) => state.gqiEditor.selectedData.goal);
  const tips = useSelector((state) => state.commonSettings.dashboardTips);

  useEffect(() => {
    dispatch(getUserQuestionsAndIndicators());
    scrollToTop();
  }, [dispatch])


  const backToDraft = () => {
    dispatch(setLeftDrawerMenuIndex(1));
    history.push('/editor');
  }

  const createQuestion = () => {
    dispatch(resetSession());
    dispatch(setLeftDrawerMenuIndex(2));
    history.push('/editor');
  }

  const selectQuestionsIndicators = (event, value) => {
    event.preventDefault();
    if (value === 0) {
      setIndex(value);
      setBreadcrumbs([
        <Link
          underline="hover"
          variant={breadCrumb}
          color="inherit"
          href="/"
          onClick={selectQuestionsIndicators}
        >
          Dashboard
        </Link>,
        <Typography variant={breadCrumb} color="textPrimary">
          My Questions
        </Typography>
      ]);
    } else if (value === 1) {
      setIndex(value);
      setBreadcrumbs([
        <Link
          underline="hover"
          variant={breadCrumb}
          color="inherit"
          href="/"
          onClick={selectQuestionsIndicators}
        >
          Dashboard
        </Link>,
        <Typography variant={breadCrumb} color="textPrimary">
          My Indicators
        </Typography>
      ]);
    } else {
      setIndex(-1);
      setBreadcrumbs([
        <Link
          underline="hover"
          variant={breadCrumb}
          color="textPrimary"
          href="/"
          onClick={selectQuestionsIndicators}
        >
          Dashboard
        </Link>
      ]);
    }
  };

  const [index, setIndex] = useState(-1);
  const [hover, setHover] = useState(-1);
  const [breadcrumbs, setBreadcrumbs] = useState([
    <Link
      underline="hover"
      variant={breadCrumb}
      color={index === -1 ? "textPrimary" : "inherit"}
      href="/demo"
      onClick={selectQuestionsIndicators}
    >
      Dashboard
    </Link>
  ]);

  const dashboardItems = [
    {
      title: "My Questions",
      subTitle: "List of your saved and favourite questions",
      icon: <ContactSupportIcon/>
    },
    {
      title: "My Indicators",
      subTitle: "List of your saved and favourite questions",
      icon: <BarChartIcon/>
    }
  ];
  return (
    <>
      <Breadcrumbs
        separator={<NavigateNextIcon/>}
        aria-label="breadcrumb"
        style={{marginBottom: 16}}
      >
        {breadcrumbs}
      </Breadcrumbs>

      <Grid container>
        <Grid item xs={12} lg={8}>
          {index === 0 ? <MyQuestions/> : <></>}
          {index === 1 ? <MyIndicators/> : <></>}
          {index === -1 ? (
            <>
              {dashboardItems.map((item, index) => {
                return (
                  <Card style={{marginBottom: 8, borderRadius: borderRadius}} key={index} raised={index === hover}
                        onMouseEnter={() => setHover(index)}
                        onMouseLeave={() => setHover(-1)}>
                    <Grid container direction="column">
                      <Grid item xs>
                        <CardHeader avatar={item.icon} title={<Typography>{item.title}</Typography>}
                                    subheader={item.subTitle}
                                    action={<IconButton aria-label="settings"
                                                        onClick={(e) => selectQuestionsIndicators(e, index)}>
                                      <ChevronRightIcon/>
                                    </IconButton>}/>
                      </Grid>
                    </Grid>
                  </Card>
                );
              })}
            </>
          ) : <></>}
        </Grid>
      </Grid>


      {/*<Grid container direction="column">*/}
      {/*  <Grid container justify="space-between" alignItems="center">*/}

      {/*    <Grid item xs>*/}
      {/*      <Typography variant="h3">*/}
      {/*        My Questions*/}
      {/*      </Typography>*/}
      {/*    </Grid>*/}

      {/*    <Grid item>*/}
      {/*      {tips ? (*/}
      {/*        <ClickAwayListener onClickAway={() => dispatch(dashboardTips(false))}>*/}
      {/*          <Tooltip*/}
      {/*            arrow placement="left"*/}
      {/*            open={tips} disableFocusListener disableHoverListener disableTouchListener*/}
      {/*            TransitionComponent={Fade}*/}
      {/*            title={*/}
      {/*              <Grid container alignItems="center">*/}
      {/*                <Grid item xs>*/}
      {/*                  <Typography style={{margin: 8}}>*/}
      {/*                    Ask a new question*/}
      {/*                  </Typography>*/}
      {/*                </Grid>*/}
      {/*              </Grid>}>*/}
      {/*            <Button*/}
      {/*              className={styles.newQuestion}*/}
      {/*              onClick={Object.keys(selectedGoal).length !== 0 ?*/}
      {/*                () => setGqiEditorInProgress(true) :*/}
      {/*                createQuestion}>*/}
      {/*              Ask Question*/}
      {/*            </Button>*/}
      {/*          </Tooltip>*/}
      {/*        </ClickAwayListener>*/}
      {/*      ) : (*/}
      {/*        <Button*/}
      {/*          className={styles.newQuestion}*/}
      {/*          onClick={Object.keys(selectedGoal).length !== 0 ?*/}
      {/*            () => setGqiEditorInProgress(true) :*/}
      {/*            createQuestion}*/}
      {/*        >*/}
      {/*          Ask Question*/}
      {/*        </Button>*/}
      {/*      )}*/}
      {/*    </Grid>*/}
      {/*  </Grid>*/}

      {/*  {userQuestionsAndIndicators.length !== 0 ?*/}
      {/*    userQuestionsAndIndicators.map((questionIndicators, index) => {*/}
      {/*      const {goal, question, indicators, indicatorSaveResponses, questionCode} = questionIndicators;*/}
      {/*      return (*/}
      {/*        <Grid item xs key={index} className={classes.gutterBottomLarge}>*/}
      {/*          <QuestionIndicator*/}
      {/*            questionAvatar={index + 1}*/}
      {/*            goal={goal}*/}
      {/*            question={question}*/}
      {/*            classes={classes}*/}
      {/*            indicators={indicators}*/}
      {/*            indicatorResponseData={indicatorSaveResponses}*/}
      {/*            questionCode={questionCode}*/}
      {/*          />*/}
      {/*        </Grid>*/}
      {/*      )*/}
      {/*    }) : (*/}
      {/*      <Grid item xs className={styles.gutter}>*/}
      {/*        <Typography >*/}
      {/*          No questions added yet!*/}
      {/*        </Typography>*/}
      {/*      </Grid>*/}
      {/*    )}*/}

      {/*  {userDefinedIndicators.length !== 0 ? (*/}
      {/*    <Grid item xs className={classes.gridSubheader}>*/}
      {/*      <Typography variant='h4' className={classes.gutterTopBottomLarge}>*/}
      {/*        My Indicators*/}
      {/*      </Typography>*/}
      {/*      {userDefinedIndicators.map((indicator, index) => {*/}
      {/*        return (*/}
      {/*          <Grid item xs key={index} className={classes.gutterBottom}>*/}
      {/*            <IndicatorCard*/}
      {/*              indicator={indicator}*/}
      {/*              selectedIndicators={[]}*/}
      {/*              classes={classes}*/}
      {/*            />*/}
      {/*          </Grid>)*/}
      {/*      })}*/}
      {/*    </Grid>*/}
      {/*  ) : <></>}*/}
      {/*</Grid>*/}

      <ModalMessage
        dialogTitle={"You have a draft saved for GQI Editor!"}
        dialogPrimaryContext={
          <Typography component={'span'} gutterBottom>
            Would you like to go to the draft of GQI Editor?
          </Typography>
        }
        openDialog={gqiEditorInProgress}
        setOpenDialog={setGqiEditorInProgress}
        primaryAction={backToDraft}
        primaryButton={"To GQI Editor Draft"}
        secondaryAction={createQuestion}
        secondaryButton={"Create new Question"}
      />

      <ScrollToTop/>
    </>
  )
}
